<!DOCTYPE html>
<html>

<head>
    <title>Random</title>
    <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,600" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
    <script src="jquery.js"></script>
    <script src="random.js"></script>
    <script src="script.js"></script>
</head>

<body>
    <ul class="nav">
        <li><a href="index.html">Home</a></li>
        <li><a href="random.html">Random</a></li>
    </ul>
    <div class="head bp">
        <h2 id="header_title">Passphrase Generator</h2>
        <input id="output_textbox" class="text_centered" type="text" readonly>
        <div class="button_wrapper">
            <button id="generate_button">New</button>
            <button id="select_button">Select</button>
        </div>
        <div class="radio_wrapper">
            <label><input type="radio" name="output_type" value="password"> Password</label>
            <label><input type="radio" name="output_type" value="passphrase" checked> Passphrase</label>
            <label><input type="radio" name="output_type" value="number"> Number</label>
        </div>
        <div class="slider_wrapper">
            <input type="range" min="1" max="32" value="16" id="length_slider">
            <p id="slider_value">16</p>
        </div>
        <div class="numbox_wrapper">
            <p>Minimum Number</p>
            <input type="number" id="minimum_number" value="0">
        </div>
        <div class="numbox_wrapper">
            <p>Maximum Number</p>
            <input type="number" id="maximum_number" value="10">
        </div>
    </div>


</body>

</html>